<template>
  <view class="notice-main">
  	<view v-for="(item,index) in noticeList" :key="index" class="notice-card">
  		<view class="main flexR"  @click="toPage(item)">
  			<view class="left">
  				<view class="introduce">
  					{{item.title}}
  				</view>
          <!-- <view class="read-sum" v-if="showRead">
            阅读量 4124
          </view> -->
          <view class="read-sum" style="margin-top: -30upx;">
            {{item.createTime}}
          </view>
  			</view>
  			<view class="right">
          <img class="img" :src="item.imageurl" alt="">
  			</view>
  		</view>
      
  	</view>
  </view>
</template>

<script>
  export default {
    name:"NoticeList",
    props: {
      noticeList: {
        type: Array,
        default: () => {
          return []
        }
      },
      showRead: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        
      };
    },
    methods: {
      // toPage(item) {
      //   this.$emit('toPage', item)
      // },
      toPage(item) {
        uni.navigateTo({
          url: `/pages/Home/Notice/detail?id=${item.id}`
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
	.introduce{
		height: 90rpx;
		color: $text-color;
		line-height: 30rpx;
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; // 作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式
		-webkit-line-clamp: 3; // 显示的行
		max-width: calc(100vw - 60rpx - 20px);
		image{
			max-width: calc(100vw - 60rpx - 20px);
		}
	}
  .notice-main {
    // padding: 0 24upx;
    // height: 500upx;
    overflow-y: auto;
  }
  
  .notice-card {
    background-color: $uni-bg-color;
    color: #B5B5B5;
    font-size: 24rpx;
    padding: 24upx;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    .main {
      justify-content: space-between;
    }
    
    .right {
      width: 200upx !important;
      .img {
        width: 200upx;
        height: 96upx;
        background-color: #999;
      }
    }
    .read-sum {
      
    }
  }
  
</style>